<template>
  <div class="theme-test">
    <h1>主题系统测试页面</h1>
    
    <div class="test-section">
      <h2>基础组件测试</h2>
      
      <div class="test-card">
        <h3>卡片组件</h3>
        <p>这个卡片的背景色应该随着主题变化</p>
      </div>
      
      <div class="test-table">
        <table>
          <thead>
            <tr>
              <th>组件</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格行1</td>
              <td>正常</td>
            </tr>
            <tr>
              <td>表格行2</td>
              <td>正常</td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="test-form">
        <h3>表单组件</h3>
        <input type="text" placeholder="输入框测试" />
        <select>
          <option>选择器测试</option>
        </select>
        <textarea placeholder="文本域测试"></textarea>
      </div>
    </div>
    
    <div class="test-section">
      <h2>布局组件测试</h2>
      
      <div class="test-layout">
        <div class="test-header">
          <h3>头部区域</h3>
        </div>
        <div class="test-sidebar">
          <h3>侧边栏</h3>
          <ul>
            <li>菜单项1</li>
            <li>菜单项2</li>
            <li>菜单项3</li>
          </ul>
        </div>
        <div class="test-content">
          <h3>主内容区</h3>
          <p>这里的内容背景色应该随着主题变化</p>
        </div>
        <div class="test-footer">
          <h3>底部区域</h3>
        </div>
      </div>
    </div>
    
    <div class="test-section">
      <h2>主题控制</h2>
      
      <div class="theme-controls">
        <button @click="setTheme('#ff6b6b')" class="theme-btn red">红色主题</button>
        <button @click="setTheme('#4ecdc4')" class="theme-btn green">绿色主题</button>
        <button @click="setTheme('#45b7d1')" class="theme-btn blue">蓝色主题</button>
        <button @click="setTheme('#feca57')" class="theme-btn yellow">黄色主题</button>
        <button @click="setTheme('#ff9ff3')" class="theme-btn pink">粉色主题</button>
        <button @click="setTheme('#ffffff')" class="theme-btn white">白色主题</button>
        <button @click="setTheme('#1a1a1a')" class="theme-btn dark">深色主题</button>
      </div>
      
      <div class="current-theme">
        <p>当前主题色: <span :style="{ color: currentTheme }">{{ currentTheme }}</span></p>
        <p>主题类型: {{ isDark ? '深色' : '浅色' }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useTheme } from '@/hooks'

const theme = useTheme('#ffffff')

const currentTheme = computed(() => theme.currentTheme.value)
const isDark = computed(() => theme.isDark.value)

const setTheme = (color) => {
  theme.setTheme(color)
}
</script>

<style scoped>
.theme-test {
  padding: 20px;
  min-height: 100vh;
  background-color: var(--demo-bg-color, #ffffff);
  transition: background-color 0.3s ease;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: var(--demo-bg-color, #ffffff);
  transition: background-color 0.3s ease;
}

.test-section h2 {
  margin-top: 0;
  color: #303133;
}

.test-card {
  padding: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background-color: var(--demo-bg-color, #ffffff);
  transition: background-color 0.3s ease;
  margin-bottom: 16px;
}

.test-table table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--demo-bg-color, #ffffff);
  transition: background-color 0.3s ease;
}

.test-table th,
.test-table td {
  padding: 8px 12px;
  text-align: left;
  border: 1px solid #e4e7ed;
  background-color: var(--demo-bg-color, #ffffff);
  transition: background-color 0.3s ease;
}

.test-table th {
  background-color: rgba(var(--demo-bg-color-rgb, 255, 255, 255), 0.1);
  font-weight: 600;
}

.test-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.test-form input,
.test-form select,
.test-form textarea {
  padding: 8px 12px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: rgba(var(--demo-bg-color-rgb, 255, 255, 255), 0.05);
  transition: all 0.3s ease;
}

.test-form input:focus,
.test-form select:focus,
.test-form textarea:focus {
  outline: none;
  border-color: #409eff;
}

.test-layout {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  min-height: 400px;
}

.test-header {
  grid-area: header;
  padding: 16px;
  background-color: rgba(var(--demo-bg-color-rgb, 255, 255, 255), 0.9);
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.test-sidebar {
  grid-area: sidebar;
  padding: 16px;
  background-color: rgba(var(--demo-bg-color-rgb, 255, 255, 255), 0.9);
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.test-sidebar ul {
  list-style: none;
  padding: 0;
}

.test-sidebar li {
  padding: 8px 0;
  border-bottom: 1px solid #e4e7ed;
}

.test-content {
  grid-area: content;
  padding: 16px;
  background-color: var(--demo-bg-color, #ffffff);
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.test-footer {
  grid-area: footer;
  padding: 16px;
  background-color: rgba(var(--demo-bg-color-rgb, 255, 255, 255), 0.9);
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.theme-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.theme-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.theme-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.theme-btn.red { background-color: #ff6b6b; }
.theme-btn.green { background-color: #4ecdc4; }
.theme-btn.blue { background-color: #45b7d1; }
.theme-btn.yellow { background-color: #feca57; color: #333; }
.theme-btn.pink { background-color: #ff9ff3; }
.theme-btn.white { background-color: #ffffff; color: #333; border: 1px solid #e4e7ed; }
.theme-btn.dark { background-color: #1a1a1a; }

.current-theme {
  padding: 16px;
  background-color: rgba(var(--demo-bg-color-rgb, 255, 255, 255), 0.1);
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.current-theme p {
  margin: 8px 0;
  font-weight: 500;
}

.current-theme span {
  font-family: monospace;
  font-weight: bold;
}
</style> 